// 懒加载插件
import {useIntersectionObserver} from '@vueuse/core'
//定义一个插件
export const imgLazyPlugin = {
    install(app) {
        // 自定义指令
        // img-lazy 图片懒加载-当图片出现在视口区域时加载图片
        app.directive('img-lazy', {
            mounted(el, binding) {
                // 监控视口区域是否显示
                const {stop} = useIntersectionObserver(el, ([{isIntersecting}]) => {
                    if (isIntersecting) {
                        el.src = binding.value
                        stop()
                    }
                },)
            }
        })
    }
}